// {$namespace，$element-separator}
@use './config.scss' as *;
// {getCssVar,getNvueCssVar}
@use './function.scss' as *;


// BEM命名混入--block
@mixin bem_b($block) {
	// 定义一个BEM命名规范的block命名
	// for example : 'ide-button'
	// !global将覆盖全局变量
	$B: $namespace + '-' + $block !global;

	.#{$B} {
		// 占位符.调用这个混入函数时可将{}内的内容作为@content的内容
		// for example : @include bem(button){color:#000}  => .ide-button{color:#000}
		@content;
	}
}
// BEM命名混入--element
@mixin bem_e($element) {
	// 定义一个BEM命名规范的element命名
	// for example : bem_e(text) => '.ide-button__text'
	$E: $element !global;
	$selector: &;
	$currentSelector: '';
	@each $unit in $element {
		$currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
	}
	@if hitAllSpecialNestRule($selector) {
		// 如果$selector是为修饰符、flag或伪类其中一项，则将@content放至&连接符中
		@at-root {
			#{$selector} {
				#{$currentSelector} {
					@content;
				}
			}
		}
	} @else {
		// 如果$selector不为修饰符、flag或伪类其中一项，则将@content放至当前调用bem_e的选择器中
		@at-root {
			#{$currentSelector} {
				@content;
			}
		}
	}
}
// BEM命名混入--modifier
@mixin bem_m($modifier) {
	// 定义一个BEM命名规范的modifier命名
	// for example : bem_e(expand) => '.ide-button__text--expand'
	$selector: &;
	$currentSelector: '';
	@each $unit in $modifier {
		$currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};
	}

	@at-root {
		#{$currentSelector} {
			@content;
		}
	}
}
// 多类mixin
// @include bem_b(('button--success', 'button--plain')) => .button--success.button--plain{}
@mixin multiple($list) {
	$name: '';
	@each $item in $list {
		@if $item != '' {
			$name: $name + '.' + $item;
		}
	}
	&#{$name} {
		@content;
	}
}

@mixin when($state) {
	// @at-root选择器会将内部的样式编译至样式表的根部
	@at-root {
		&.#{$state-prefix + $state} {
			@content;
		}
	}
}
// 伪元素mixin
@mixin pseudo($pseudo) {
	@at-root #{&}#{':#{$pseudo}'} {
		@content;
	}
}

// flex-mixin
@mixin flex($direction: row) {
	/* #ifndef APP-NVUE */
	// nvue环境，无需设置display
	display: flex;
	/* #endif */
	flex-direction: $direction;
}

// flex-mixin
@mixin VueAndNvueStyleAttr($attr,$args...) {
	/* #ifndef APP-NVUE */
	#{$attr}: getCssVar($args...);
	/* #endif */
	/* #ifdef APP-NVUE */

	#{$attr}: getNvueCssVar($args...);
	/* #endif */
}
